<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>授权</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 注意：项目正式环境请勿引用该地址 -->
  <link rel="stylesheet" th:href="@{/plugin/layui/css/layui.css}">
</head>
<body>
<input type="hidden" id="id" th:value="${id}" />

<div id="test7" class="demo-transfer"></div>
<div class="layui-btn-container">
    <button type="button" class="layui-btn" lay-demotransferactive="getData">授权</button>
    <button type="button" class="layui-btn" lay-demotransferactive="reload">重置</button>
</div>
<!--<script th:src="@{/plugin/jquery/jquery.min.js}"></script>-->
<script th:src="@{/plugin/layui/layui.js}"></script>
<script>
    layui.use(['transfer', 'layer', 'util'], function(){
        var $ = layui.$
            ,transfer = layui.transfer
            ,layer = layui.layer
            ,util = layui.util;
        var id = $("#id").val();
        var all = [];
        var grant = [];
        $.ajax({
            async: false, // 同步
            method: "get",
            url: "/user/grant/list?id=" + id,
            success: function (data){
                if (data.code == 200){
                    all = data.data.all;
                    grant = data.data.grant;
                }
            }
        });



        //实例调用
        transfer.render({
            elem: '#test7'
            ,data: all
            ,id: 'key123' //定义唯一索引
            ,title: ['未授权', '已授权']
            ,showSearch: true
            ,value: grant
            ,parseData: function (res){
                return {
                    'value': res.roleId,
                    'title': res.roleName
                }
            }
        });

        //批量办法定事件
        util.event('lay-demoTransferActive', {
            getData: function(othis){
                var getData = transfer.getData('key123'); //获取右侧数据
                var ids = [];
                for (var data of getData){
                    ids.push(data.value);
                }
                // 关掉当前
                parent.layer.close(parent.index);
                // parent.layer.closeAll();
                // var index = layer.msg('提交中', {
                //     icon: 16
                //     ,shade: 0.01
                // });
                // $.ajax({
                //     async: false, // 同步
                //     method: "post",
                //     url: "/user/grant",
                //     data: {
                //         "ids": ids,
                //         "userId": id
                //     },
                //     success: function (data){
                //         layer.close(index);
                //         layer.msg('授权成功', {icon: 1, time: 3000,});
                //     }
                // });
                console.log(ids);
            }
            ,reload:function(){
                //实例重载
                transfer.reload('key123', {
                    value: grant
                    ,showSearch: true
                })
            }
        });

    });
</script>
</body>
</html>